<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>管理员文章管理 - XYZ博客</title>
  <meta name="keywords" content="XYZ博客,管理员文章管理" />
  <meta name="description" content="XYZ博客的管理员文章管理。" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <link rel="stylesheet" href="/pear/component/pear/css/pear.css" />
</head>
<body class="pear-container">

<blockquote class="layui-elem-quote">
  在这里可以管理用户发表的所有文章。删除操作将会对文章进行真实删除，请谨慎操作。
</blockquote>

<div class="layui-card">
  <div class="layui-card-body">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <div class="layui-form-item layui-inline">
          <label class="layui-form-label">文章标题</label>
          <div class="layui-input-inline">
            <input type="text" name="title" placeholder="请输入文章标题" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item layui-inline">
          <label class="layui-form-label">文章摘要</label>
          <div class="layui-input-inline">
            <input type="text" name="abstractText" placeholder="请输入文章摘要" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item layui-inline">
          <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="systemArticle-query">
            <i class="layui-icon layui-icon-search"></i>
            查询
          </button>
          <button type="reset" class="pear-btn pear-btn-md">
            <i class="layui-icon layui-icon-refresh"></i>
            重置
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

<div class="layui-card">
  <div class="layui-card-body">
    <table class="layui-hide" id="systemArticle" lay-filter="systemArticle"></table>
  </div>
</div>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  <a class="layui-btn layui-btn-xs" lay-event="look">查看</a>
</script>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="addArticle">发布文章</button>
  </div>
</script>

</body>
<script src="/pear/component/layui/layui.js"></script>
<script src="/pear/component/pear/pear.js"></script>
<script src="/blogs/assets/js/jquery.min.js"></script>
<script type="text/html" id="public-show">
  {{#if (d.publicShow == 1) { }}
  <span>公开</span>
  {{# }else if(d.publicShow == 0){ }}
  <span>不公开</span>
  {{# } }}
</script>
<script type="text/html" id="top-show">
  <input type="checkbox" name="topFlag" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="top-show" {{ d.topFlag== true ? 'checked' : '' }} />
</script>
<script type="text/html" id="check-show">
  <input type="checkbox" name="checkFlag" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="check-show" {{ d.checkFlag== true ? 'checked' : '' }} />
</script>
<script th:inline="none">
  //注意：导航 依赖 element 模块，否则无法进行功能性操作
  layui.use(['element', 'form', 'table', 'laypage', 'common'], function() {
    var element = layui.element;
    var form = layui.form;
    var table = layui.table;
    var laypage = layui.laypage;
    let common = layui.common;

    layer.msg('使用电脑展示更佳', {
      closeBtn: 1,
      icon: 6,
      time: 3 * 1000,
      offset: '21px'
    });

    table.render({
      elem: '#systemArticle',
      url: '/system/article/systemArticleList',
      toolbar: '#toolbarDemo',
      skin: 'line',
      cols: [[
        {type: 'checkbox'}
        ,{field:'id', title: 'ID', align: 'center'}
        ,{field:'title', title: '文章标题', width: 280, align: 'center'}
        ,{field:'abstractText', title: '文章摘要', width: 380, align: 'center'}
        ,{templet:'#public-show', field:'publicShow', title: '公开', width: 200, align: 'center'}
        ,{templet:'#top-show', field:'topFlag', title: '置顶', width: 100, align: 'center'}
        ,{templet:'#check-show', field:'checkFlag', title: '审核', width: 100, align: 'center'}
        ,{field:'addTimeShow', title: '新增时间', width: 180, align: 'center'}
        ,{field:'updateTimeShow', title: '修改时间', width: 180, align: 'center'}
        ,{title:'操作', toolbar: '#barDemo', width: 180, align: 'center'}
      ]],
      page: true,
      defaultToolbar: [{
        title: '刷新',
        layEvent: 'refresh',
        icon: 'layui-icon-refresh',
      }, 'filter', 'print', 'exports']
    })

    // 工具栏事件
    table.on('toolbar(systemArticle)', function(obj){
      var id = obj.config.id;
      var checkStatus = table.checkStatus(id);
      var othis = lay(this);
      switch(obj.event){
        case 'addArticle':
          window.open("/article/newArticlePage");
          break;
        case 'refresh':
          window.refresh();
          break;
      };
    });

    // 触发单元格工具事件
    table.on('tool(systemArticle)', function(obj){ // 双击 toolDouble
      var data = obj.data;
      // console.log(obj)
      if(obj.event === 'del'){
        window.remove(obj);
      } else if(obj.event === 'look'){
        window.open("/system/article/systemArticleShow?id=" + data.id)
      }
    });

    window.refresh = function(param) {
      table.reload('systemArticle');
    }

    window.remove = function(obj) {
      layer.confirm('确定要删除这篇文章', {
        icon: 3,
        title: '提示'
      }, function(index) {
        layer.close(index);
        let loading = layer.load();
        $.ajax({
          url: "/system/article/systemDeleteArticle",
          data: {
            "id": obj.data.id
          },
          type: 'delete',
          success: function(result) {
            layer.close(loading);
            if (result.code == 200) {
              layer.msg(result.message, {
                icon: 1,
                time: 2000
              }, function() {
                obj.del();
              });
            } else {
              layer.msg(result.message, {
                icon: 2,
                time: 2000
              });
            }
          }
        })
      });
    }

    form.on('submit(systemArticle-query)', function(data) {
      table.reload('systemArticle', {
        where: data.field
      })
      return false;
    });

    form.on('switch(top-show)', function(obj) {
      // 修改启用状态
      $.ajax({
        url: "/system/article/top",
        async: true,
        type: "PUT",
        data: {
          "id": this.value,
          "topFlag": obj.elem.checked
        },
        success: function (data) {
          if (data.code == 200) {
            layer.msg(data.message, {
              icon: 1,
              time: 2000
            });
          } else {
            layer.msg(data.message, {
              icon: 2,
              time: 2000
            });
          }
        }
      })
    });

    form.on('switch(check-show)', function(obj) {
      // 修改启用状态
      $.ajax({
        url: "/system/article/check",
        async: true,
        type: "PUT",
        data: {
          "id": this.value,
          "checkFlag": obj.elem.checked
        },
        success: function (data) {
          if (data.code == 200) {
            layer.msg(data.message, {
              icon: 1,
              time: 2000
            });
          } else {
            layer.msg(data.message, {
              icon: 2,
              time: 2000
            });
          }
        }
      })
    });
  })
</script>
</html>